// 定义一个轮播图类
class Carousel {
    constructor(tag){
        // console.log(tag)//.box
        // 获取目标
        this.tag = document.querySelector(tag)
        // 左\右箭头
        this.lt=this.tag.querySelector('.lt')
        this.rt=this.tag.querySelector('.rt') 
        // 获取li列表
        this.list = this.tag.querySelectorAll('.img_box>ul>li')
        // 获取所有li要移动的类名
        this.listClassName = ['list01','list02','list03','list04']
        // 初始化变量、获取上一个初始化变量值
        this.index=0
        this.lastIndex=0
        // 底部圆点控制器
        this.dot_box = this.tag.querySelector('.img_box>.dot_box')
        // 小圆点
        this.dots = this.dot_box.querySelectorAll('span')
        // 定时器
        this.timer
        // 左\右箭头触发绑定事件
        this.eventFn()
        //底部小圆点事件
        this.dotsFn()
        //定时器自动轮播
        this.timeFn()
        // 鼠标移入移出
        this.mouseLeaveFn()
    }

    // li全部重新设置类名
    restListFn(){
        this.list.forEach((item,idx)=>item.className = this.listClassName[idx])
    }
    // 右箭头
    rtFn(){
            // 操作数组
            // 添加数组最后一个字值到第一个
            this.listClassName.unshift(this.listClassName[3])
            // 删除最后一个
            this.listClassName.pop()
            // li全部重新设置类名
            this.restListFn()
            //记录本次操作的值  
            this.lastIndex= this.index++
            // index最大值
            ;(this.index == this.listClassName.length)&&(this.index = 0)
            console.log(this.lastIndex,this.index)
            // 小圆点颜色
            this.dotsColor()
    }
    // 左箭头
    ltFn(){
            // 添加数组第一个值到最后
            this.listClassName.push(this.listClassName[0])
            // 删除第一个
            this.listClassName.shift()
            this.restListFn()
            this.lastIndex = this.index--
            ;(this.index<0)&&(this.index = this.listClassName.length-1)
            this.dotsColor()
    }
    // 左右箭头
    eventFn(){
        // 右箭头
        this.rt.addEventListener('click',()=>{
            this.rtFn()
        })
        // 左箭头
         this.lt.addEventListener('click',()=>{
            this.ltFn()
        })
    }
    // 小圆点颜色
    dotsColor(){
        this.dots[this.lastIndex].classList.remove("dot_active")
        this.dots[this.index].classList.add("dot_active")
        // 保存这次的操作值给下一次
        this.lastIndex =this.index
    }
    // 小圆点控制
    dotsFn(){
        this.dots.forEach(val=>{
            val.addEventListener('click',()=>{
                let dataIndex = val.getAttribute("data-index")
                console.log('dataIndex:'+dataIndex)//1 2 3 4
                this.index = dataIndex-1
                console.log(this.index,this.lastIndex)
                // 重复点击相同小圆点不生效
                if(this.index ==this.lastIndex) return
                // 操作数组
                let arrFirst = this.listClassName[0],
                    arrOther = this.listClassName.slice(1,this.index),
                    arrSlice = this.listClassName.slice(this.index)
                if(arrSlice.length == this.listClassName.length){
                    // 添加数组最后一个字值到第一个、删除最后一个
                    this.listClassName.unshift(this.listClassName[3])
                    this.listClassName.pop()
                }else{
                    // 截取数组
                    this.listClassName=this.listClassName.slice(this.index)
                    // 把原数组第一个添加（unshift）到截取（slice）后数组的第一个
                    this.listClassName.unshift(arrFirst)
                    // 然后把剩余的拼接到数组最后
                    this.listClassName= this.listClassName.concat(arrOther)
                }
                console.log('操作后：'+this.listClassName)
                // li全部重新设置类名
                // this.restListFn()
                this.list.forEach((item,idx)=>item.className = this.listClassName[idx])

                // 小圆点颜色
                this.dotsColor()
                this.lastIndex = this.index
            })
        })
    }
    // 自动轮播
    timeFn(){
        this.timer&&clearInterval(this.timer)
        this.timer = setInterval(()=>{
            this.rtFn()
        }, 1000)
    }
    // 鼠标移入移出
    mouseLeaveFn(){
        // 鼠标移入，停止定时器
        this.tag.addEventListener("mouseover",()=>{clearInterval(this.timer)})
        // 鼠标移出开始定时器
        this.tag.addEventListener("mouseleave", ()=>{setTimeout(()=>{this.timeFn()}, 1000)})
        // 检测页面是否切换，切换就停止定时器
        window.addEventListener("visibilitychange", ()=>{document.hidden? clearInterval(this.timer): this.timeFn()})
    }
} 